<template>
    <div class="statusBox" v-if="orderDetail.orderStatus">
        <template v-if="orderDetail.orderStatus.code==10">
            <div class="statusIcon">
                <img src="/images/status1.png" alt="">
            </div>
            <div class="remark">
                <h5>待付款</h5>
                <p>恭喜您拍得以下商品，请立完成付款!</p>
            </div>
        </template>

        <template v-if="orderDetail.orderStatus.code==20">
            <div class="statusIcon">
                <img src="/images/status2.png" alt="">
            </div>
            <div class="remark">
                <h5>出库中</h5>
                <p>订单已到达商家，正在备货中...</p>
            </div>
        </template>

        <template v-if="orderDetail.orderStatus.code==30">
            <div class="statusIcon">
                <img src="/images/status3.png" alt="">
            </div>
            <div class="remark">
                <h5>已发货</h5>
                <p @click="copy">物流单号：{{orderDetail.trackingNumber || '--'}} <img v-if="orderDetail.trackingNumber" src="/images/copy.png" alt=""></p>
            </div>
        </template>

        <template v-if="orderDetail.orderStatus.code==50">
            <div class="statusIcon">
                <img src="/images/status4.png" alt="">
            </div>
            <div class="remark">
                <h5>交易成功</h5>
                <p @click="copy">物流单号：{{orderDetail.trackingNumber || '--'}} <img v-if="orderDetail.trackingNumber" src="/images/copy.png" alt=""></p>
            </div>
        </template>
       
    </div>
     <div style="height:1px;overflow: hidden;position: absolute;z-index: 1;left:0;top:0">
        <textarea readonly id="input"></textarea>
     </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {toast} from '@/utils/common'
export default {
    props:{
        orderDetail:Object
    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        const copy =()=>{
            const input = document.getElementById("input");
            input.value = 'HSGQ28271727172717-yu'; // 修改文本框的内容
            input.select(); // 选中文本
            document.execCommand("copy"); // 执行浏览器复制命令
            toast("复制成功");
        }

        return{
            ...toRefs(state),
            copy
        }
    }
}
</script>

<style lang="scss" scoped>
    .statusBox{
        display: flex;
        width: 100%;
        min-height: 160px;
        background: linear-gradient(180deg, #27A6A6 0%, #0E6161 58%, #014343 94%);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        padding: 30px;
        margin: 0 0 30px 0;
        .statusIcon{
            width: 60px;
            height: 60px;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .remark{
            padding: 0 0 0 20px;
            font-size: 26px;
            h5{
                height: 60px;
                line-height: 60px;
                font-weight: 500;
                font-size: 38px;
            }
            p{
                display: flex;
                align-items: center;
                padding: 7px 0 0 0;
                color: rgba(225,225,225,0.7);
                img{
                    width: 24px;
                    height: 24px;
                    margin: 0 0 0 20px;
                }
            }
        }
    }
</style>